<template>
  <el-submenu
    v-if="item.items"
    :index="item.id + ''"
    v-bind="item"
  >
    <template slot="title">
      <i :class="icon" />
      <span slot="title"> {{ item.label }}</span>
    </template>
    <ed-menu-item
      v-for="i in item.items"
      :item="i"
      :key="i.id"
    />
  </el-submenu>
  <el-menu-item
    v-else
    v-bind="item"
    :index="item.id + ''"
  >
    <i :class="icon" />
    <span slot="title">{{ item.label }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: 'EdMenuItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    icon () {
      return this.item.icon || 'el-icon-menu'
    }
  }
}
</script>

<style scoped>

</style>
